 <template>
  <div class="New_build">
    <div class="mask"></div>
    <div class="new_build">
        
      <div class="build-top">
        <p>改单（仓库盘差明细查询）</p>
        <i class="el-icon-close" @click="closeChange"></i>
      </div>

      <div class="build-info">
        <div class="b-btn">
          <el-button @click="query" type="primary" icon="el-icon-search">查询</el-button>
          <!-- <el-button @click="odChange" icon="el-icon-edit-outline">修改</el-button> -->
        </div>
        <div class="build-info-1">
          <p>盘差日期</p>
          <el-date-picker
            @input="leave"
            v-model="differTime"
            :disabled="Dis"
            value-format="yyyy-MM-dd"
            type="date">
          </el-date-picker>
          <p>单号</p>
          <el-input v-model="receiptsNumber" :disabled="Dis" @input="leave" class="build-inp"></el-input>
          <p>盘差数量</p>
          <el-input v-model="differNumber" :disabled="Dis" @blur="leave1" class="build-inp"></el-input>
          
          <p>仓库编号</p>
          <el-input v-model="warehouseNo" disabled></el-input>
        </div>
        <div class="build-info2">
            <p>售价</p>
            <el-input v-model="sellingPrice" disabled class="build-inp"></el-input>
            <p>盘差序号</p>
            <el-input v-model="sequence" disabled class="build-inp"></el-input>
            <p>仓库</p>
            <el-input v-model="warehouseNo" disabled class="build-inp"></el-input>
            <p>货号</p>
            <el-input v-model="kindsNumber" class="build-inp"></el-input>
        </div>
        

        <!-- <div class="barcode">
          <p>条码扫描</p>
          <el-switch
            v-model="isBarcode"
            active-color="#409EFF"
            inactive-color="#C0C4CC">
          </el-switch>
          
        </div>

        <div class="enterBarcode">
          <el-input v-model="barcode" placeholder="扫描/输入条码"></el-input>
          <el-input placeholder="不一致的情况手输货号，输完按回车"></el-input>
        </div> -->

        <el-table
          height="210px"
          :data="barcodeData"
          highlight-current-row
          @row-click="rowClick"
          show-summary
          style="width: 100%"
          :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
          :cell-style="{padding:0,height:'36px'}">
          <el-table-column
            prop="sequence"
            label="仓库盘差序号"
            width="120px">
          </el-table-column>
          <el-table-column
            prop="warehouseNo"
            label="仓库编号">
          </el-table-column>
          <el-table-column
            prop="receiptsNumber"
            label="单号">
          </el-table-column>
          <el-table-column
            prop="kindsNumber"
            label="货号">
          </el-table-column>
          <el-table-column
            prop="differNumber"
            label="盘差数量">
          </el-table-column>
          <el-table-column
            prop="sellingPrice"
            label="售价">
          </el-table-column>
          <el-table-column
            prop="onePrice"
            label="单价">
            </el-table-column>
            <el-table-column
            prop="differTime"
            label="盘差日期">
            </el-table-column>
        </el-table>
      </div>
      
      <div class="build-btn" >
        <div style="margin:5px 20px 0 0">
          <el-button @click="closeChange">取消</el-button>
          <el-button type="primary" plain @click="saveChange">保存</el-button>
          <!-- <el-button type="primary" @click="keepGoing">继续录入</el-button> -->
        </div>
      </div>
      
    </div>

    <!-- <div class="popup" :style="{display:showPopup}">
      <div class="popup_t">
        <p>输入扫描数量</p>
        <i class="el-icon-close" @click="closePopup"></i>
      </div>
      <div class="popup_c">
        <p>请输入扫描数量</p>
        <p>如果不输入则扫描数量为1</p>
        <input type="text" v-model="one" class="popup_button">
      </div>
      <div class="popup_b">
        <el-button>删除</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </div> -->

  </div>
</template>


<script>
import { kindsNumberOut } from '../../../../network/customerOutTotal'
import {isEnough} from '../../../../network/quarter'
// import { kindsNumberOutContinue, kindsNumberOut } from '../../../../network/customerOutTotal'

export default {
  props: {
    detailInfo: {
      type: Object,
      default: {}
    }
  },
  data(){
    return {
      showPopup:'none',
      Dis:true,
      differTime:new Date(),
      receiptsNumber:'',
      differNumber:'',
      warehouseNo:'',
      sellingPrice:'',
      sequence:'',
      warehouseNo:'',
      barcodeData: [],
      details:[],
      kindsNumber:'',
      numList:[],
    }
  },
  methods: {
    query(){
      for(let w of this.barcodeData){
        if(this.kindsNumber == w.kindsNumber){
          this.barcodeData = [w]
        }
      }
    },
    odChange(){
      this.$emit('odChange',this.barcodeData)
    },

    rowClick(e){
      this.details = e
      localStorage.setItem('pcChangeList',JSON.stringify(this.testList))
      this.Dis = false
      this.receiptsNumber = e.receiptsNumber
      this.differTime = e.differTime
      this.differNumber = e.differNumber
      this.sellingPrice = e.sellingPrice
      this.kindsNumber = e.kindsNumber
      console.log(e)
    },
    remove(){
      this.differTime = '',
      this.receiptsNumber = '',
      this.differNumber = '',
      this.warehouseNo = '',
      this.sellingPrice = '',
      this.sequence = '',
      this.warehouseNo = '',
      this.barcodeData =  []
    },
    closeChange(){
      this.$emit('closeChange')
    },
    //改单保存
    saveChange(){
      console.log(this.saveList)
      var kindsNumberNumberMap = {}
      var No = ''
      var kindList = []
      for(let a of this.saveList){
        kindsNumberNumberMap[a.kindsNumber] = a.differNumber //货号为 key值 数量 value
        No = a.warehouseNo
        kindList.push(a.kindsNumber)
      }
      let obj = {kindsNumberNumberMap,companyNo:No}
      console.log(obj)
      isEnough(JSON.stringify(obj)).then(res=>{ //库存是否足够 /扣库存
        console.log(res)
        if(res.data.code == 200 && res.data.data == null){
          this.$emit('saveChange',this.barcodeData)
        }
        if(res.data.data != null){
          for(let b in this.barcodeData){
            for(let c of res.data.data){
              if(this.barcodeData[b].kindsNumber == c){
                this.barcodeData.splice(b,1)
              }
            }
          }
          if(this.barcodeData != ''){
            this.$emit('InsufficientList',res.data.data)
            this.$emit('saveChange',this.barcodeData)
          }else{
            this.$message.error({message:'此序号下所有货号库存均不足',offset:400})
          }
          
          console.log(this.barcodeData)
        }
      })
      return
      
      this.remove()
    },
    //失去焦点 改表单
    leave(){
      if(this.differNumber == ''){
        this.$message({
          type: 'warning',
          offset:400,
          message: '请选择表格数据进行改单'
        });
        return
      }
      for(let a of this.saveList){
        // if(this.kindsNumber == a.kindsNumber){
          a.differTime = this.differTime
          a.receiptsNumber = this.receiptsNumber
        // }
      }
      for(let b of this.barcodeData){
        if(this.kindsNumber == b.kindsNumber){
          b.differNumber = this.differNumber
        }
        b.differTime = this.differTime
        b.receiptsNumber = this.receiptsNumber
      }
    },
    //改数量
    leave1(){
      this.numList = JSON.parse(localStorage.getItem('pcChangeList'))
      if(this.numList != null){
        if(this.kindsNumber != ''){
          for(let a of this.numList){
            if(a.kindsNumber == this.kindsNumber){var number = this.differNumber - a.differNumber} //和原数据对比 获取改动数量的差值
          }
          for(let b of this.saveList){ //不改变原数组数量
            if(this.kindsNumber == b.kindsNumber){
              b.differNumber = number
            }
            b.differTime = this.differTime
            b.receiptsNumber = this.receiptsNumber
          }
        }
        for(let c of this.barcodeData){
            if(this.kindsNumber == c.kindsNumber){
              c.differNumber = this.differNumber
            }
            c.differTime = this.differTime
            c.receiptsNumber = this.receiptsNumber
        }
      }
    }
    
  },

  watch:{
    receiptsNumber(a,b){
      if(a){
        this.receiptsNumber = a.toUpperCase().trim()
      }
    },
    detailInfo(a,b){
      console.log(a)
      this.differTime = a.differTime
      this.receiptsNumber = a.receiptsNumber
      this.differNumber = a.differNumber
      this.warehouseNo = a.warehouseNo
      this.sellingPrice = a.sellingPrice
      this.sequence = a.sequence
      this.warehouseNo = a.warehouseNo
      this.barcodeData = a.dataList
      this.testList = JSON.parse(JSON.stringify(this.barcodeData))
      this.saveList = JSON.parse(JSON.stringify(this.barcodeData))
      this.saveList.forEach(e=>{
        e.differNumber = 0
      })
      this.kindsNumber = a.kindsNumber
      // console.log(this.barcodeData)
    }
  }

}
</script>

<style scoped>
  .middle{
    padding: 10px 15px;
  }
  .middle p{
      padding-bottom: 10px;
  }
  ._top{
      display: flex;
      width: 100%;
      height: 40px;
      padding: 10px 15px;
      justify-content: space-between;
      background: #f8f8f8;
      font-weight: 700;
  }
  /* 新建资料 */
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    z-index: 9;
  }
  .new_build{
    position: fixed;
    /* position: relative; */
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 1070px;
    height: 470px;
    z-index: 99;
    background-color: white;
    overflow: auto;
  }
  .new_build .build-top{
    height: 40px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
  }
  .build-top p{
      font-weight: 700;
  }
  .b-btn{
    margin: 10px 0;
    padding: 10px;
    background: #f4f4f4;
  }


  .new_build input{
    height: 30px;
    border: buildlid 1px #DCDFE6;
    border-radius: 5px;
    margin-left: 10px;
  }
  .new_build input:focus{
    outline: none;
    border: buildlid 1px #409EFF;
  }

  .build-info{
    padding: 0 15px;
    padding-bottom: 10px;
    /* border-bottom: buildlid #f2f2f2 2px; */
  }
  .build-info-1 p{
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 15px;
  }


  .build-info2{
    display:flex;
    margin:10px 0;
  }
  .build-info2 p{
    display:inline-block;
    width:80px;
    text-align:right;
    margin-right:15px;
  }

  .colorBox, .infoBox {
    display: inline;
  }

  .enterBarcode{
    height: 60px;
    background-color: #f2f2f2;
    margin: 15px 0;
    display: flex;
  }

  .build-btn{
    text-align: right;
  }

  .build-inp{
      width: 160px;;
  }

</style>

<style>
.new_build .build-info-4 .el-table .cell{
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 41px;
    padding-right: 10px;
    height: 40px;
}
.new_build .build-info-4 .el-input__inner{
  border: 0px;
}
.new_build .build-info-4 .el-input__inner:focus{
  border: 1px solid #017aff;
}

  /* .new_build .build-info-1 .el-input, .new_build .build-info-3 .el-input{
    width: 425px;
  } */
  .new_build .build-info-1 .el-input, .new_build .build-info-2 .el-input{
    margin-top: 10px;
    width: 160px;
  }
  .new_build .el-input__inner{
    height: 30px!important;
  }
  .new_build .el-input__icon{
    line-height: 30px!important;
  }
  /* .build-info .barcode .el-switch{
    margin: 0!important;
  } */


  .new_build .enterBarcode .el-input{
    width: 435px;
    margin: 14px 17px;
  }

</style>